<template>
  <div class="search">
    <Card>
      <Row>
        <Form
          ref="editForm"
          :model="editForm"
          :rules="addRule"
          style="width: 100%"
          :label-width="150"
        >
          <FormItem label="圈子名称" prop="title">
            <Input
              v-model="editForm.title"
              placeholder="请输入圈子名称"
              :maxlength="50"
              style="width: 40%"
            />
          </FormItem>
          <FormItem label="圈子排序" prop="sort">
            <Input
              v-model="editForm.sort"
              type="number"
              placeholder="请输入圈子排序（数字越小越靠前）"
              style="width: 40%"
            />
          </FormItem>
          <FormItem label="圈子封面" prop="thumb" style="width: 100%">
            <Upload
              action
              type="drag"
              ref="upload"
              :max-size="2 * 1024"
              :show-upload-list="false"
              :before-upload="beforeUpload"
              accept=".jpg, .jpeg, .bmp, .png"
              :format="['jpg', 'jpeg', 'bmp', 'png']"
              style="width: max-content; display: inline-block"
            >
              <img v-if="editForm.thumb" class="baseItem" :src="editForm.thumb" />
              <div v-else style="width: 150px; height: 150px; line-height: 150px">
                <Icon type="md-add" size="20" />
              </div>
            </Upload>
            <span style="margin-left: 20px; color: #aaa"
              >只能上传jpg/png/bmp文件，且不超过2MB</span
            >
          </FormItem>
          <FormItem label="圈子简介" prop="intro">
            <Input
              v-model="editForm.intro"
              type="textarea"
              style="width: 40%"
              :autosize="{ minRows: 10, maxRows: 10 }"
              placeholder="请输入圈子简介"
            />
          </FormItem>
          <FormItem label="发帖是否需要审核" prop="status">
            <RadioGroup v-model="editForm.status">
              <Radio :label="0">需要</Radio>
              <Radio :label="1">不需要</Radio>
              <Radio :label="2">触及敏感词需要</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="是否允许用户进行发帖" prop="allow">
            <RadioGroup v-model="editForm.allow">
              <Radio :label="0">允许</Radio>
              <Radio :label="1">不允许</Radio>
            </RadioGroup>
          </FormItem>
          <div>
            <Button type="text" @click="toback">返回</Button>
            <Button type="primary" @click="submitForm">保存</Button>
          </div>
        </Form>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_community from "@/api/community.js";

export default {
  name: "field-form",
  data() {
    return {
      editForm: {
        // 表单
        id: null,
        title: null, //圈子名称
        sort: null, //圈子排序
        thumb: null, //圈子封面
        intro: null, //圈子简介
        status: 0, // 是否需要审核
        allow: 0, // 是否允许发帖 0允许 1不允许
      },
      addRule: {
        // 验证规则
        title: [{ required: true, message: "请输入圈子名称" }],
        sort: [
          { required: true, message: "请输入圈子排序" },
          { pattern: /^[1-9]\d*$/, message: "请输入大于0的整数", trigger: "blur" },
        ],
        thumb: [{ required: true, message: "请上传圈子封面" }],
        status: [{ required: true, message: "请选择发帖是否需要审核" }],
        allow: [{ required: true, message: "请选择是否允许用户进行发帖" }],
      },
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  methods: {
    // 返回上级
    toback() {
      this.$store.commit("removeTag", "field-form");
      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
      this.$router.go(-1);
    },
    // 初始化表单
    init(id) {
      if (id) {
        API_community.circleDetail({ id }).then((res) => {
          if (res.code == 200) {
            Object.keys(this.editForm).map((i) => {
              this.editForm[i] = res.data[i];
            });
          }
        });
      }
      this.$refs.editForm.resetFields();
    },
    // 自定义上传
    beforeUpload(file) {
      let typeList = [".jpg", ".jpeg", ".bmp", ".png"];
      if (!typeList.some((i) => file.name.lastIndexOf(i) != -1)) {
        this.$Message.warning("请检查上传文件格式");
        return;
      }
      if (file.size / 1024 > 2 * 1024) {
        this.$Message.warning("图片大小不能超过2MB");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      API_community.postUpload(formData).then((res) => {
        if (res.success) {
          this.editForm.thumb = res.result;
        }
      });
      return false;
    },
    //提交
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if (this.editForm.id) {
            API_community.circleEdit(this.editForm).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.toback();
              }
            });
          } else {
            API_community.circleAdd(this.editForm).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.toback();
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss">
.tox.tox-tinymce.tox-fullscreen {
  top: 110px !important;
  left: 190px !important;
  width: calc(100% - 202px) !important;
  height: calc(100% - 122px) !important;
}
.baseItem {
  display: inline-block;
  position: relative;
  height: 150px;
  margin-right: 10px;
  .base-icon {
    position: absolute;
    top: 5px;
    color: #fff;
    font-size: 20px;
    right: 5px;
    &:hover {
      cursor: pointer;
    }
  }
  &:hover {
    opacity: 0.9;
  }
  img {
    height: 100%;
  }
}
</style>
